<template>
  <div class="water-wrapper">
    <!-- 指标库管理 -->
    <el-row>
      <el-col :span="24" class="common-top-viscous-style">
        <el-row>
          <el-col :span="12">
            <el-input
              v-model="filter.indexName"
              class="search"
              size="small"
              placeholder="请输入指标名称"
              suffix-icon="el-icon-search"
              clearable
              @change="getFn"
              @clear="getFn"
            />
          </el-col>
          <el-col :span="12" align="right">
            <el-button type="primary" size="small" @click="addFn">添加指标</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-table :data="dataList.rows" size="small">
          <el-table-column
            v-for="item in columns"
            :key="item.key"
            :prop="item.key"
            :label="item.title"
          />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editFn(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delFn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <Save ref="saveRef" :save-obj="saveObj" @getFn="getFn" />
  </div>
</template>

<script>
import {
  delDept,
  getIndexlibList
} from '@/api/infoConfig/indexlib'
import Save from './save'
export default {
  components: {
    Save
  },
  data() {
    return {
      filter: {
        indexName: '',
        pageSize: 20,
        pageNum: 1
      },
      columns: [
        {
          key: 'indexCode',
          title: '指标编码',
          width: 180
        },
        {
          key: 'indexName',
          title: '指标名称',
          width: 180
        },
        {
          key: 'indexUnit',
          title: '指标单位',
          width: 180
        },
        {
          key: 'indexType',
          title: '指标类型',
          width: 180
        }
      ],
      dataList: [],
      saveObj: {
        show: false,
        title: '',
        data: {
          indexUid: '',
          indexCode: '',
          indexName: '',
          indexUnit: '',
          indexType: ''
        }
      }
    }
  },
  mounted() {
    this.getFn()
  },
  methods: {
    // 指标列表
    getFn() {
      getIndexlibList(this.filter).then(res => {
        this.dataList = res
      })
    },
    // 添加指标
    addFn() {
      this.saveObj.show = true
      this.saveObj.title = '添加指标'
      this.saveObj.data = {
        indexUid: '',
        indexCode: '',
        indexName: '',
        indexUnit: '',
        indexType: ''
      }
      this.$refs.saveRef.getFormFn()
    },
    // 编辑指标
    editFn(data) {
      this.saveObj.show = true
      this.saveObj.title = '编辑指标'
      this.saveObj.data = JSON.parse(JSON.stringify(data))
      this.$refs.saveRef.getFormFn()
    },
    // 删除指标
    delFn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDept(row.indexUid).then(res => {
          this.getFn()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="sass">
  @import "./indexlib"
</style>

